.flex {
  display: -webkit-flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}

.flex-v {
  flex-direction: column;
 -o-flex-direction: column;
 -ms-flex-direction: column;
 -moz-flex-direction: column;
 -webkit-flex-direction: column;
 -webkit-box-orient: vertical;
}

.flex-r {
  -webkit-box-orient: revert;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

.flex-rr {
  -webkit-box-orient: revert;
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.flex-vr {
  -webkit-box-orient: revert;
  -webkit-flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

.flex-pack-justify {
  justify-content: space-between;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  -moz-justify-content: space-between;
  -webkit-justify-content: space-between;
  -webkit-box-pack: justify;
}

.flex-pack-justify-center {
  justify-content: center;
  -o-justify-content: center;
  -ms-justify-content: center;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  -webkit-box-pack: center;
}

.flex-pack-justify-start {
  justify-content: flex-start;
 -o-justify-content: flex-start;
 -ms-justify-content: flex-start;
 -moz-justify-content: flex-start;
 -webkit-justify-content: flex-start;
 -webkit-box-pack: start;
}

.flex-pack-justify-end {
  justify-content: flex-end;
 -o-justify-content: flex-end;
 -ms-justify-content: flex-end;
 -moz-justify-content: flex-end;
 -webkit-justify-content: flex-end;
 -webkit-box-pack: end;
}

.flex-pack-around {
  -webkit-justify-content: space-around;
  justify-content: space-around;
}

.flex-align-center {
  align-items: center;
  -o-align-items: center;
  -ms-align-items: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
}

.flex-align-end {
  align-items: flex-end;
 -o-align-items: flex-end;
 -ms-align-items: flex-end;
 -moz-align-items: flex-end;
 -webkit-align-items: flex-end;
 -webkit-box-align: end;
}

.flex-align-self-start {
  align-self: flex-start;
}

.flex-align-self-end {
  align-self: flex-end;
}

.flex-wrap {
  flex-wrap: wrap;
 -o-flex-wrap: wrap;
 -ms-flex-wrap: wrap;
 -moz-flex-wrap: wrap;
 -webkit-flex-wrap: wrap;
}

.flex1 {
 flex: 1 1 auto;
 -ms-flex: 1 1 auto; /* IE 10 */
 -webkit-flex: 1 1 auto; /* Chrome */
 box-flex: 1 1 auto;
 -moz-box-flex: 1 1 auto; /* Firefox */
 -webkit-box-flex: 1 1 auto; /* Safari 和 Chrome */
}